<template>

    <!--添加按钮-->
    <div class="tools-div">
        <el-button type="success" size="small" @click="addManage">添 加</el-button>
    </div>
    <!---数据表格-->
    <el-table :data="list" style="width: 100%">
        <el-table-column prop="direction" label="心理方案名称" />
        <el-table-column prop="waymode" label="实行方案" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" align="center" width="280" #default="scope">
            <el-button type="primary" size="small" @click="editShow(scope.row)">
                详情
            </el-button>
            <el-button type="danger" size="small" @click="deleteById(scope.row)">
                删除
            </el-button>
        </el-table-column>
    </el-table>

    <!-- 详情 -->
    <el-dialog v-model="dialogVisible" title="详情" width="40%">
        <el-form label-width="120px">
            <el-form-item label="心理方案名称">
                <el-text/>{{ xinli.direction }}
            </el-form-item>

            <el-form-item label="实行方案">
                <el-text/>{{ xinli.waymode }}
            </el-form-item>
            <el-form-item>
                <el-button @click="dialogVisible=false">返回</el-button>
            </el-form-item>
        </el-form>
    </el-dialog> 

    <!-- 添加 -->
    <el-dialog v-model="dialogVisibles" title="添加" width="40%">
        <el-form label-width="120px">
            <el-form-item label="心理方案名称">
                <el-input v-model="xinli.direction"/>
            </el-form-item>

            <el-form-item label="实行方案">
                <el-input type="textarea" autosize placeholder="请输入内容" v-model="xinli.waymode">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button @click="dialogVisibles=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog> 
</template>

<script setup>
import { ref,onMounted } from 'vue'; 
import {findHeart,DeleteHeart,saveHeart,findHeartById} from '@/api/heart';
import { ElMessage,ElMessageBox } from 'element-plus'


const dialogVisibles = ref(false)
const dialogVisible = ref(false)
//数据模板
let list = ref([])
onMounted(()=>{
    findHearts()
})
const findHearts = async()=>{
    const {data} = await findHeart()
    list.value = data
}
const deleteById = async(row)=>{
    ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
       const {code } = await DeleteHeart(row.id)
       if(code === 200) {
            ElMessage.success('删除成功')
            findHearts()
       }
    })
}

const xinli = ref({
    direction:'',
    waymode:''
})
const addManage = ()=>{
    dialogVisibles.value = true
}
//添加数据
const submit = async()=>{
    await saveHeart(xinli.value)
    dialogVisibles.value = false
    ElMessage.success('删除成功')
    findHearts()
}
//详情
const editShow = async(row)=>{
    const {data} = await findHeartById(row.id)
    xinli.value = data
    dialogVisible.value = true
}
</script>

<style lang="scss" scoped>

</style>